<ion-header>

  <ion-navbar>
    <ion-buttons end>
      <button ion-button (click)="skip()">
        {{continueText}}
      </button>
    </ion-buttons>
    <ion-title>Slides</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-slides pager
              effect="flip"
              (ionSlideDidChange)="onSlideChanged($event)"
              (ionSlideWillChange)="onSlideChangeStart($event)"
              (ionSlideDrag)="onSlideMove($event)">

    <ion-slide>
      <h3>Thank you for choosing the Awesome App!</h3>
      <div id="logo">
        <img src="appicon.png" style="max-width: 128px">
      </div>
      <p>
        The number one app for everything awesome.
      </p>
    </ion-slide>

    <ion-slide>
      <h3>Using Awesome</h3>

       <div id="list">
         <h5>Just three steps:</h5>
         <ol>
           <li>Be awesome</li>
           <li>Stay awesome</li>
           <li>There is no step 3</li>
         </ol>
       </div>
       <button ion-button (click)="toggleLastSlide()">Toggle Last Slide</button>
    </ion-slide>

    <ion-slide *ngIf="showSlide">
      <h3>Any questions?</h3>
    </ion-slide>

  </ion-slides>

</ion-content>

<style>
.slide {
  color: #000;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

#logo {
  margin: 30px 0px;
}

#list {
  width: 170px;
  margin: 30px auto;
  font-size: 20px;
}
#list ol {
  margin-top: 30px;
}
#list ol li {
  text-align: left;
  list-style: decimal;
  margin: 10px 0px;
}

.button.ng-hide{
  display:none;
}
</style>
